import { Button, Table } from 'antd'
import type { ColumnsType } from "antd/es/table";
import { useCallback } from "react";
import { useUserStore } from "@/store/userStore";
import type { User } from '@/types/userTypes';

type TableData = User & { key: number };

export default function Home() {
    const { users, loadUsers } = useUserStore();
    const data = users.map(u => ({ ...u, key: u.id }));
    const tableColumns: ColumnsType<TableData> = [
        { key: "id", title: "ID", dataIndex: "id", width: 50 },
        { key: "name", title: "Name", dataIndex: "name", width: 180 },
        { key: "web_url", title: "Web URL", dataIndex: "web_url", width: 500 }
    ];
    const handleButtonClick = useCallback(() => {
        loadUsers(1, 10);
    }, [loadUsers]);
    return (
        <div>
            <h1>用户</h1>
            <Button type="primary" onClick={handleButtonClick}>查询用户</Button>
            <Table<TableData> dataSource={data} columns={tableColumns} />
        </div>
    )
}
